<template>
  <q-layout :view="viewStyle" class="full-height">

    <!-- HEADER START -->
    <q-header class="q-py-xs bg-white text-grey-8" height-hint="48"
              style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px; padding-bottom: 2px">

      <!-- 状态栏 -->
      <q-toolbar style="margin-top: -4px;" class="q-electron-drag">
        <q-btn flat dense round
               aria-label="Menu"
               :icon="leftDrawerOpen === true?'menu_open':'menu'"
               @click="leftDrawerOpen = !leftDrawerOpen"/>
        <!-- toolbar - title -->
        <toolbar-title/>
        <!-- 面包屑 -->
        <breadcrumbs v-if="$q.screen.gt.sm"/>
        <q-space/>
        <!-- 右侧元素 -->
        <toolbar-item-right/>
      </q-toolbar>

      <q-separator color="grey-3"/>

      <!-- TAGVIEW -->
      <tag-view/>

    </q-header>
    <!-- HEADER END -->

    <!-- slideBar START -->
    <q-drawer v-model="leftDrawerOpen"
              show-if-above
              content-class="bg-white"
              :width="240">
      <base-menu/>
    </q-drawer>
    <!-- slideBar END -->

    <!-- container START -->
    <q-page-container class="app-main full-height">

      <transition name="fade-transform" mode="out-in">
        <keep-alive :max="Max_keepAlive" :include="keepAliveList">
          <router-view :key="$route.fullPath"/>
        </keep-alive>
      </transition>
    </q-page-container>
    <!-- container END -->

  </q-layout>
</template>

<script>
import BaseMenu from '../components/Menu/BaseMenu'
import TagView from 'components/TagView/TagView'
import Breadcrumbs from '../components/Breadcrumbs/Breadcrumbs'
import ToolbarTitle from 'components/Toolbar/ToolbarTitle'
import ToolbarItemRight from 'components/Toolbar/ToolbarItemRight'

export default {
  name: 'MainLayout',
  components: {
    ToolbarItemRight,
    ToolbarTitle,
    Breadcrumbs,
    TagView,
    BaseMenu
  },
  data () {
    return {
      viewStyle: this.$SildeBar,
      leftDrawerOpen: false,
      Max_keepAlive: this.$Max_KeepAlive,
      keepAliveList: this.$store.getters.getKeepAliveList
    }
  },
  computed: {
    // Get cache list
    getKeepAliveList () {
      return this.$store.getters.getKeepAliveList
    },
    key () {
      return this.$route.fullPath
    }
  },
  watch: {
    getKeepAliveList (n, o) {
      this.keepAliveList = n
    }
  }
}
</script>
